<template>
    <div class="app-container">
        <el-card>
            <el-page-header @back="goBack">
                <template #content>
                    <div class="flex items-center">
                        <div v-if="!route.query?.id">新增制版单</div>
                        <div v-else>
                            <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
                                制版单编码:
                            </span>
                            <el-tag>{{ form.platemakingCode }}</el-tag>
                        </div>
                    </div>
                </template>
                <template #extra>
                    <div class="flex items-center" v-if="!route.query.info">
                        <el-button type="primary" @click="submitForm">保 存</el-button>
                    </div>
                </template>
            </el-page-header>
        </el-card>
        <el-card style="margin-top: 10px">
            <el-collapse v-model="activeNames">
                <el-collapse-item disabled title="基本信息" name="1">
                    <template #title>
                        <el-icon style="color: #4479f6">
                            <Position />
                        </el-icon>
                        <span class="title">基本信息</span>
                    </template>
                    <div>
                        <el-form
                            :model="form"
                            :rules="rules"
                            :disabled="flag"
                            ref="userRef"
                            label-width="100px"
                        >
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="制版日期" prop="platemakingDate">
                                        <el-date-picker
                                            style="width: 100%"
                                            clearable
                                            v-model="form.platemakingDate"
                                            value-format="YYYY-MM-DD"
                                            type="date"
                                            placeholder="请选择日期"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="制版人" prop="platemakingBy">
                                        <el-input
                                            v-model="form.platemakingBy"
                                            readonly
                                            placeholder=""
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="烤版人" prop="bakedBy">
                                        <el-input v-model="form.bakedBy" readonly placeholder="" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="创建人" prop="createBy">
                                        <el-input v-model="form.createBy" readonly placeholder="" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="创建时间" prop="createTime">
                                        <el-date-picker
                                            style="width: 100%"
                                            readonly
                                            v-model="form.createTime"
                                            value-format="YYYY-MM-DD"
                                            type="date"
                                            placeholder="请选择时间"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="备注">
                                        <el-input
                                            v-model="form.remark"
                                            type="textarea"
                                            placeholder="请输入内容"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-collapse-item>
                <el-collapse-item disabled title="制版明细" name="2">
                    <template #title>
                        <el-icon style="color: #4479f6">
                            <Position />
                        </el-icon>
                        <span class="title">制版明细</span>
                    </template>
                    <el-button
                        v-if="!flag"
                        style="margin-bottom: 10px"
                        type="primary"
                        size="small"
                        @click="handleAddStorage"
                    >
                        选择生产单
                    </el-button>
                    <el-table
                        v-loading="loading"
                        class="table-form"
                        :data="mesPlatemakingDetailList"
                    >
                        <el-table-column
                            label="序号"
                            width="60"
                            type="index"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            v-if="route.query?.id"
                            label="制版序列号"
                            align="center"
                            width="120"
                            prop="platemakingNo"
                        ></el-table-column>
                        <el-table-column
                            label="类型"
                            align="center"
                            width="120"
                            prop="isNew"
                        ></el-table-column>
                        <el-table-column
                            label="生产单编码"
                            align="center"
                            width="120"
                            prop="produceNo"
                        ></el-table-column>
                        <el-table-column
                            label="出版编号"
                            min-width="120"
                            align="center"
                            prop="pubNo"
                        />
                        <el-table-column
                            label="印刷序列号"
                            min-width="120"
                            prop="printProduceNo"
                            align="center"
                        ></el-table-column>
                        <el-table-column label="品种" prop="breed" min-width="160" align="center">
                            <!-- <template #default="scope">
                                <dict-tag :options="ems_order_breed_type" :value="scope.row.breed" />
                            </template> -->
                        </el-table-column>
                        <el-table-column
                            label="组成"
                            min-width="160"
                            prop="composition"
                            align="center"
                        >
                            <!-- <template #default="scope">
                                <dict-tag :options="ems_order_make_up" :value="scope.row.composition" />
                            </template> -->
                        </el-table-column>
                        <el-table-column
                            label="印张"
                            width="120"
                            prop="sheet"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            label="印数"
                            width="120"
                            prop="printAmount"
                            align="center"
                        ></el-table-column>
                        <el-table-column label="印色" width="120" prop="printColour" align="center">
                            <template #default="scope">
                                <dict-tag
                                    :options="ems_order_print_color"
                                    :value="scope.row.printColour"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="版材数量"
                            width="120"
                            prop="sheetAmount"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            label="版材尺寸"
                            prop="sheetSize"
                            width="120"
                            align="center"
                        >
                            <template #default="scope">
                                <dict-tag
                                    :options="ems_machine_info_size"
                                    :value="scope.row.sheetSize"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column label="是否烤版" width="120" prop="kaoban" align="center">
                            <template v-slot="{ row }">
                                {{ row.kaoban == 1 ? '是' : '否' }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="制版数量"
                            min-width="120"
                            prop="platemakingNumber"
                            :show-overflow-tooltip="true"
                        >
                            <!--                            <template #default="scope">-->
                            <!--                                <el-form-item>-->
                            <!--                                    <el-input type="number" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"-->
                            <!--                                        :disabled="flag" v-model.number="scope.row.platemakingNumber"-->
                            <!--                                        placeholder="请输入"></el-input>-->
                            <!--                                </el-form-item>-->
                            <!--                            </template>-->
                        </el-table-column>
                        <el-table-column
                            label="取版人"
                            width="120"
                            prop="takeUser"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            label="取版日期"
                            width="120"
                            prop="takeDate"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            label="做版人"
                            width="120"
                            prop="makeUser"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            label="做版日期"
                            width="120"
                            prop="makeDate"
                            align="center"
                            > <template v-slot="{ row }">
                                        {{ row.makeDate?.split('T')[0] }}
                                    </template>
                        </el-table-column>
                        <el-table-column
                            label="备注"
                            width="120"
                            align="center"
                            prop="remark"
                            :show-overflow-tooltip="true"
                        >
                            <template #default="scope">
                                <span v-if="flag">{{ scope.row.remark }}</span>
                                <el-form-item v-else>
                                    <el-input
                                        v-model="scope.row.remark"
                                        placeholder="请输入"
                                    ></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            v-if="!flag"
                            align="center"
                            fixed="right"
                            class-name="small-padding fixed-width"
                        >
                            <template #default="scope">
                                <el-tooltip content="删除" placement="top">
                                    <el-button
                                        link
                                        type="primary"
                                        icon="Delete"
                                        @click="handleDelete(scope.row)"
                                    ></el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </el-card>
        <!-- 领用库单明细 -->
        <orderList
            :visible="orderListOpen"
            @changeUpdate="changeOrderData"
            :orderSelectList="orderSelectList"
            @cancel="
                () => {
                    orderListOpen = false
                }
            "
        ></orderList>
    </div>
</template>

<script setup>
import orderList from './orderList.vue'
import {
    editPlatemaking,
    addPlatemaking,
    getPlatemakingInfo,
} from '@/api/production/platemaking.js'
import useTagsViewStore from '@/store/modules/tagsView'
import useUserStore from '@/store/modules/user'
import { ElMessage } from 'element-plus'
import { nextTick } from 'vue'
const tagsViewStore = useTagsViewStore()
const { proxy } = getCurrentInstance()
const { ems_machine_info_size, ems_order_make_up, ems_order_print_color, ems_order_breed_type } =
    proxy.useDict(
        'ems_order_breed_type',
        'ems_machine_info_size',
        'ems_order_make_up',
        'ems_order_print_color'
    )
const route = useRoute()
const router = useRouter()
const orderListOpen = ref(false)
const orderSelectList = ref([])
const activeNames = ['1', '2']
const userRef = ref(null)
const flag = ref(false)
const loading = ref(false)
const userInfo = useUserStore()
const data = reactive({
    form: {},
    mesPlatemakingDetailList: [],
    rules: {
        platemakingBy: [{ required: true, message: '制版人不能为空', trigger: 'change' }],
        platemakingDate: [
            { required: true, message: '制版日期不能为空', trigger: ['blur', 'change'] },
        ],
    },
})

const { form, rules, mesPlatemakingDetailList } = toRefs(data)

nextTick(() => {
    form.value.createBy = userInfo.name
    form.value.platemakingBy = userInfo.name
    form.value.bakedBy = userInfo.name
})

if (route.query.id) {
    getPlatemakingInfo(route.query.id).then(res => {
        Object.assign(form.value, { ...res.data })
        mesPlatemakingDetailList.value = res.data.mesPlatemakingDetailList
        if (route.query.info) {
            flag.value = true
        }
    })
} else {
    flag.value = false
    form.value = {}
    mesPlatemakingDetailList.value = []
}

// 获取当前时间
const getCurrentDateTime = () => {
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')
    form.value.createTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    form.value.platemakingDate = `${year}-${month}-${day}`
}
getCurrentDateTime()

// 新增入库明细
const handleAddStorage = () => {
    orderSelectList.value = mesPlatemakingDetailList.value
    orderListOpen.value = true
}
// 选中的入库明细

const changeOrderData = row => {
    const codeSet = new Set(mesPlatemakingDetailList.value.map(data => data.detailId))//data.producePrintId
    row.forEach(item => {
        if (!codeSet.has(item.detailId)) {//item.producePrintId

            mesPlatemakingDetailList.value.push({ ...item })
            codeSet.add(item.detailId) //item.producePrintId
        }
    })
    orderListOpen.value = false
}

// 删除
const handleDelete = row => {
    proxy.$modal.confirm('是否确认删除该数据？').then(function () {
        // mesPlatemakingDetailList.value = mesPlatemakingDetailList.value.filter(item => item.producePrintId ? item.producePrintId != row.producePrintId : item.id != row.id)
        mesPlatemakingDetailList.value = mesPlatemakingDetailList.value.filter(item =>
            item.produceId ? item.produceId != row.produceId : item.id != row.id
        )
        proxy.$modal.msgSuccess('删除成功')
    })
}
// 确认
const submitForm = () => {
    userRef.value.validate(valid => {
        if (valid) {
            if (route.query.id) {
                editPlatemaking({
                    ...form.value,
                    mesPlatemakingDetailList: mesPlatemakingDetailList.value,
                }).then(res => {
                    ElMessage({
                        message: '编辑成功',
                        type: 'success',
                    })
                    goBack()
                })
            } else {
                addPlatemaking({
                    ...form.value,
                    status: 2,
                    mesPlatemakingDetailList: mesPlatemakingDetailList.value,
                }).then(res => {
                    ElMessage({
                        message: '新增成功',
                        type: 'success',
                    })
                    goBack()
                })
            }
        }
    })
}
//  返回
const goBack = () => {
    tagsViewStore.delView(route)
    router.go(-1)
}
</script>

<style lang="scss" scoped>
.footer {
    text-align: center;
}

:deep(.el-pagination) {
    position: unset;
}

.table-form :deep(.el-form-item) {
    margin-bottom: 0;
}
</style>
